<template>
  <div style="width:800px">
    <el-table :data="tableData" border row-key="id" align="left">
      <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column>
    </el-table>
    <!-- <pre style="text-align: left">
      {{ dropCol }}
    </pre> -->
    <!-- <hr /> -->
    <!-- <pre style="text-align: left">
      {{ tableData }}
    </pre> -->
  </div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  name: 'draggable',
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '刘琦',
          address: '某某地金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王舞2',
          address: '某偶滴金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '李四3',
          address: ' 莫某地金沙江路 300 弄'
        }
      ]
    };
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 1,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        }
      });
    }
  }
};
</script>
